import React from 'react';
import './index.css'
import logo from './music.svg'
import { connect } from 'react-redux'
import {searchList,clearList} from '../../store/search.redux'
@connect(
  (state) => ({
    hot: state.search.hot,
    currentNumber:state.search.currentNumber,
    currentPage:state.search.currentPage,
    totalNumber:state.search.totalNumber,
    songList:state.search.songList
  }), {
    searchList,clearList,
    setList(list){
      return {type:'player_list',list}
    }
  }
)
class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search_hisTory:false,
      showHistory: true,
      showSongList: false,
      isSearch: false
    }
  }
  componentDidUpdate(){
    this.props.setList(this.props.songList)
  }
  readySearch = (e) => {
    this.refs.ipt.style.width = "88%";
  }
  cancelSearch = (e) => {
    this.refs.ipt.style.width = '96%';
    this.setState({
      showSongList:false,
      showHistory:true
    })
  }
  search = (e) => {
    let v = e.target.value;
    if (v.trim().length > 0) {
      this.setState({
        isSearch: true
      })
    } else {
      this.setState({
        isSearch: false
      })
    }
  }

  validBottom = (e) => {
    let v1 = e.target.scrollTop+e.target.offsetHeight;
    let v2 = e.target.scrollHeight;
    if(v1>=v2){
      this.loadList();
    }
  }

  searchHot = (val) => {
    this.refs.searchInput.value=val;
    this.getResult();
  }

  getResult = () => {
    this.props.clearList();
    this.loadList();
  }

  loadList=()=>{
    let val = this.refs.searchInput.value;
    this.props.searchList(val,this.props.currentPage);
    this.setState({
      showSongList:true,
      showHistory:false
    })
  }

  render() {
    return (
      <div className="searchBox">
        <div className="iptBox">
          {/* 搜索区 */}
          <div className="ipt" ref="ipt">
            <span className="iconfont icon-sousuo" id="search"></span>
            <input type="search" placeholder="搜索歌曲、歌单、专辑" id="searchInput" ref="searchInput" onFocus={this.readySearch} onChange={this.search} />
          </div>
          <p className="callOff" hidden={this.state.isSearch} onClick={this.cancelSearch}>取消</p>
          <p className="callOff search_btn" hidden={!this.state.isSearch} onClick={this.getResult}>搜索</p>
        </div>
        <div className="searchBar">
          <div className="search_hisTory" hidden={!this.state.search_hisTory}>
            {/* 搜索历史记录 */}
            <div className="search_hisTory_box">
              <p v-for="(record,index) in searchRecord" key="index">
                record
        </p>
              <h1>删除历史搜索记录</h1>
            </div>
          </div>
          {/* 热门搜索 */}
          <div className="hotsearch" hidden={!this.state.showHistory}>
            <h2 className="hotsearch_title">热门搜索</h2>
            <div className="hot_sea">
              {
                this.props.hot.map((value, index) => (
                  <span className={index === 0 ? 'on' : ''} key={index} onClick={()=>this.searchHot(value)}>
                    {value}
                  </span>
                ))
              }
            </div>
          </div>
        </div>
        {/* 搜索结果列表 */}
        <div className="search_songList" hidden={!this.state.showSongList} ref="songList" onScroll={this.validBottom}>
          <ul>
            {
              this.props.songList.map((song,index)=>(
                <li key={index} onClick={()=>this.props.history.push(`/player/${song.songMid}/${song.songId}`)}>
                  {/* <Link to={`/player/${song.songMid}`}> */}
                    <img src={logo} alt="" />
                    <div className="search_song_name">
                      <p className="search_song_name1">{song.songName}</p>
                      <p className="search_song_name2">
                        {
                          song.singer.map(value=>(
                            <span key={value.singerMid}>
                              {value.singerName}
                            </span>
                          ))
                        }
                      </p>
                    </div>
                    <span>{song.songId}</span>
                  {/* </Link> */}
                </li>
              ))
            }
            <li className="isEnd">
              已经到底啦~
          </li>
          </ul>
        </div>
      </div>
    )
  }
}

export default Search;